<template>
  <div class='page'>
    <el-card>
      <template slot="header" >
        <h2>查看详情</h2>
      </template>
      <el-form ref="form"
               :model="formData"
               label-width="80px">
        <el-form-item label="日期"
                      prop="date">
          <el-date-picker v-model="formData.date"
                          type="date"
                          readonly
                          value-format="yyyy-MM-dd"
                          placeholder="日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="申请数量"
                      prop="number">
          <el-input type="number"
                    readonly
                    v-model="formData.number"
                    placeholder="申请数量"></el-input>
        </el-form-item>
        <el-form-item label="地址"
                      prop="address">
          <el-input readonly
                    v-model="formData.address"></el-input>
        </el-form-item>
        <el-form-item label="审批状态"
                      prop="state">
          <el-input readonly
                    :value="stateObj[formData.state]"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="float:right">
            <el-button type="primary" @click="$router.back(-1)" >返回</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
      },
      stateObj: {
        "1": "未审批",
        "2": "审批中",
        "3": "审批通过",
        "4": "审批失败",
      }
    }
  },
  created() {
    this.getDetailById(this.$route.params.id)
  },
  methods: {
    getDetailById(id) {
      const res = this.$store.state.tableData.find(i => i.id === id)
      this.formData = res
    }
  }
}
</script>

<style lang='scss' scoped>
.el-card {
  width: 90%;
  padding: 20px;
  min-height: 500px;
  margin: 0 auto;
}
.el-date-editor,
.el-cascader {
  width: 100%;
}
</style>